<script setup lang="ts">
import {del, get, post} from "@/axios"
import {ref, reactive, toRaw, onMounted} from "vue";
import {useMenuStore} from "@/store";
import {ElMessageBox,ElMessage} from "element-plus";

const menuPage = ref(1);
const menuSize = ref(10)
const ruleList = reactive([])
const ruleMenuList = reactive([]) 
const ruleMenuVis = ref(false)
const ruleMenuForm = reactive({
  ruleId: "",
  name: "",
  description:"",
  menuIds: []
})
const menuStore = useMenuStore()

const props = {
  value: "id",
  label: "name",
  children: "children"
}

const menuList = menuStore.getMenu

/*post("/Rule/GetRuleAndRuleList").then((res)=> {
 if(res.status == 200){
   RuleList.push(...res.data);
 }
})*/

const indexFunc = (index:number)=>{
  return  index+=1
}
const getRuleMenus = ()=>{
  get(`/Rule/GetRuleMenuList`).then((res:any)=>{
    if(res.status == 200){
      console.log(res.data)
     Object.assign(ruleMenuList,res.data)
    }
  })
}
const editRuleMenuFunc = (data:any)=>{
  ruleMenuVis.value = true;
  ruleMenuForm.ruleId = data.id;
  ruleMenuForm.name = data.name;
  ruleMenuForm.description = data.description;
  ruleMenuForm.menuIds = data.menuList;
}
const submitRuleMenuFunc = ()=>{
      post("/Rule/AddRuleMenu",{
        id: ruleMenuForm.ruleId,
        menuList: toRaw(ruleMenuForm.menuIds)
      }).then((res:any)=>{
        if(res.status == 200){
          ruleMenuVis.value = false;
          getRuleMenus()
        }
      })
}

const deleteRuleMenuFunc = (data:any)=>{
  ElMessageBox.confirm("删除之后将会清空该角色的所有菜单权限,若是去除单个请使用编辑按钮,请问是否删除?","Warning",{
    confirmButtonText: '是',
    cancelButtonText: '否',
    type: 'warning',
  }).then(() => {
    console.log(data.id)
  del(`/Rule/DeleteRuleMenu?ruleId=${data.id}`).then((res:any)=>{
    if(res.status === 200){
      getRuleMenus()
    }
  })
  })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '你已取消!',
        })
      })
}
onMounted(()=>{
  getRuleMenus()
})
</script>

<template>
<div class="rule-auth-container">
  <div class="menu-container">
    <div class="menu-table-container">
      <div class="menu-title">
        <span class="title">
          角色菜单权限
        </span>
        <div class="rule-menu-auth">
<!--          <el-button type="success">添加</el-button>-->
        </div>
      </div>
      <el-table
          :data="ruleMenuList"
           class="menu-table">
        <el-table-column
        label="角色名"
        prop="name"
        />
        <el-table-column
            label="描述"
            prop="description"
        />
        <el-table-column
            label="菜单"
            >
          <template #default="{ row }">
            <div v-if="row.menuList.length !=0">
              <el-tag
                  type="success" 
                  v-for="item in row.menuList"
                  :key="item.id"
              >{{item.name}}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="160">
          <template #default="{ row }">
            <el-button type="primary" @click="editRuleMenuFunc(row)">编辑</el-button>
            <el-button type="danger" v-if="row.menuList.length !=0" @click="deleteRuleMenuFunc(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</div>
  
  <el-dialog v-model="ruleMenuVis">
    <el-form
        label-position="left"
        :model="ruleMenuForm"
        label-width="auto"
        style="max-width: 600px">
      <template #default>
        <el-descriptions title="角色信息:">
          <el-descriptions-item label="角色名:">{{ruleMenuForm.name}}</el-descriptions-item>
          <el-descriptions-item label="描述">{{ruleMenuForm.description}}</el-descriptions-item>>
        </el-descriptions>
        <el-form-item label="菜单权限">
            <el-tree-select
                multiple
                :props="props"
                v-model="ruleMenuForm.menuIds"
                :data="menuList"
                check-strictly
                :render-after-expand="false"
                style="width: 240px"
            />
        </el-form-item>
      </template>
    </el-form>
    <el-button type="primary" @click="ruleMenuVis = false">关闭</el-button>
    <el-button type="primary" @click="submitRuleMenuFunc">提交</el-button>
  </el-dialog>
</template>

<style scoped>
.rule-auth-container{
  width: 100%;
  display: flex; 
  justify-content: space-around;
}
.rule-table-container{
  width: 800px;
  background-color: white;
  padding: 20px;
}
.table-title{
  margin-bottom: 10px;
}
.table-title .title{
  font-size: 18px;
}
.rule-name{
  margin-left: 10px;
  margin-bottom: 10px;
}

.menu-container{
  width: 800px;
  padding: 20px;
  background-color: white;
}
.menu-title{
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.menu-title .title {
  font-size: 18px;
}
</style>